<script>
import { defineComponent } from 'vue';
import { userList, addUserList, deleteUser, changeUser, searchUser } from '../../api/user';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
const route = useRoute();
export default defineComponent({
    data() {
        return {
            tableData: [],
            tableDataCom: [],
            drawer: false,
            drawer1: false,
            totalNum: 0,
            userName: '',
            email: '',
            passWord: '',
            pageSize: 10,
            currentPage: 1,
            dialogVisible: false,
            route,
            userID: '',
            searchInput: '',
            show: true,
        }
    },
    methods: {
        changeTime(row, column) {
            const date = new Date(row[column.property] * 1000)
            let year = date.getFullYear()//获取年
            let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);//月
            let day = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            return year + '年' + month + '月' + day + '日' + hours + ':' + minutes
        },

        // 封装用户列表请求
        fn1() {
            userList({ pagenum: 1, pagesize: 200 }).then((res) => {
                this.tableData = res.data.data.users;
                this.totalNum = res.data.data.users.total
            })
        },

        // 添加用户
        addUsreName() {

            // 正则校验 判断用户名是否符合规则
            if (!(/^[\w-]{4,16}$/.test(this.userName) || this.userName !== '')) {
                return ElMessage.error('用户名不符合规范');
            }
            if (!(/^[\w-]{4,16}$/.test(this.passWord) || this.passWord !== '')) {
                return ElMessage.error('密码不符合规范');

            }
            // 添加用户
            const obj = {
                username: this.userName,
                password: this.passWord,
                email: this.email,
            }
            addUserList(obj).then((res) => {
                this.drawer = false;
                ElMessage.success('添加成功');
                this.fn1();
            })
        },
        // 点击添加用户按钮
        myaddUser() {
            this.drawer = true;
            this.typeBtn = 'add';
            this.passWord = '';
            this.userName = '';
            this.email = '';
        },
        // 点击编辑按钮
        mydelUser(data) {
            this.drawer1 = true;
            this.userID = data.id;
            this.userName = data.username;
            this.email = data.email;
            console.log(data)
        },
        compileUser() {

            changeUser(this.userID).then((res) => {
                console.log(res)
                if (res.data.meta.status === 200) {
                    this.drawer1 = false;
                    ElMessage.success(res.data.meta.msg)
                }
                this.fn1();
            })

        },
        // 点击删除按钮
        delUser(data) {
            console.log(data);
            this.dialogVisible = true;
            this.userID = data.id

        },
        del() {
            this.dialogVisible = false;
            deleteUser(this.userID).then((res) => {
                console.log(res)
                if (res.data.meta.status === 200) {
                    ElMessage.success(res.data.meta.msg)
                } else {
                    return ElMessage.error(res.data.meta.msg);
                }
                this.fn1();

            })
        },
        // 点击搜索
        search() {
            this.show = false;
            console.log(this.searchInput)
            searchUser(this.searchInput).then((res) => {
                console.log(res);
                this.tableDataCom = [];
                this.tableDataCom.push(res.data.data)
                console.log(this.tableDataCom)
            })

        },
        // 展示全部用户信息
        allList() {
            this.searchInput = '';
            this.show = true;
            this.fn1();
        }


    },
    computed: {
        userListDataCom() {
            return this.tableData.slice(
                (this.currentPage - 1) * this.pageSize,
                (this.currentPage - 1) * this.pageSize + this.pageSize
            );
        },
        userListData() {
            return this.tableDataCom.slice(
                (this.currentPage - 1) * this.pageSize,
                (this.currentPage - 1) * this.pageSize + this.pageSize
            );
        },
    },
    // 页面首次打开执行 渲染数据
    mounted() {
        this.fn1();
    },
})
</script>


<template>
    <div>
        <h1>管理员列表</h1>
        <div class="search_box">
            <el-input width="300px" type="text" placeholder="输入ID搜索" v-model="searchInput" />
            <el-button type="primary" @click="search" v-if="disabled = searchInput === '' ? false : true">搜索</el-button>
            <el-button type="success" @click="allList">ALL</el-button>

            <el-button @click="myaddUser">添加用户</el-button>
            <div></div>
        </div>


        <!-- 用户展示 -->
        <el-table v-if="show" :data="userListDataCom" style="width: 100%">
            <el-table-column type="index" width="80" />
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column prop="role_name" label="角色" width="250" />
            <el-table-column prop="create_time" label="时间" :formatter="changeTime" />
            <el-table-column prop="address" label="操作" width="300">
                <template #default="data">
                    <el-button link type="primary" size="small" @click="mydelUser(data.row)">编辑</el-button>
                    <el-button link type="success" size="small" @click="delUser(data.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 搜索数据展示 -->
        <el-table v-else :data="userListData" stripe style="width: 100%">
            <el-table-column type="index" />
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="username" label="名字" width="180" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column prop="rid" label="角色ID" />
            <el-table-column prop="address" label="操作" width="300">
                <template #default="data">
                    <el-button link type="primary" size="small" @click="mydelUser(data.row)">编辑</el-button>
                    <el-button link type="success" size="small" @click="delUser(data.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="tableData.length" v-model:page-size="pageSize"
            v-model:current-page="currentPage" />
        <!-- 抽屉 添加用户 -->
        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
            <span v-if="typeBtn === 'del'">编辑信息</span>
            <span v-else>添加用户</span>
            <p>用户名: <el-input v-model="userName" placeholder="输入用户名" clearable /></p>
            <p>密码: <el-input v-model="passWord" placeholder="输入密码" clearable /></p>
            <p>邮箱: <el-input v-model="email" placeholder="输入邮箱" clearable /></p>
            <el-button @click="addUsreName">添加</el-button>
        </el-drawer>
        <!-- 抽屉 编辑用户 -->
        <el-drawer v-model="drawer1" title="I am the title" :with-header="false">
            <span>编辑信息</span>
            <p>用户名: <el-input v-model="userName" placeholder="输入用户名" clearable /></p>
            <p>邮箱: <el-input v-model="email" placeholder="输入邮箱" clearable /></p>
            <el-button type="success" @click="compileUser">编辑</el-button>
        </el-drawer>
        <!-- 删除弹窗 -->
        <el-dialog v-model="dialogVisible" title="确认框" width="30%">
            <span>您确定删除吗?</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消删除</el-button>
                    <el-button type="primary" @click="del">
                        确定删除
                    </el-button>
                </span>
            </template>
        </el-dialog>


    </div>
</template>

<style lang="scss">
.search_box {
    width: 500px;
    height: 35px;
    margin: 8px;
    display: flex;

    .el-input {
        width: 200px;
        // margin-right: 30px;
        margin-right: 10px;
    }
}
</style>